<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>个人简介</title>
    <%@ include file="../comm.jsp" %>
    <script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/toubu.css"/>
    <link href="${pageContext.request.contextPath}/css/style.css" type="text/css" rel="stylesheet" media="all">
    <script type="text/javascript">
        setInterval(function() {
            //时间
            var mydate = new Date();
            var year = mydate.getFullYear()
            var month = mydate.getMonth() + 1;
            var data = mydate.getDate();
            var h = mydate.getHours(); //获取当前小时数(0-23)
            var m = mydate.getMinutes(); //获取当前分钟数(0-59)
            var s = mydate.getSeconds(); //获取当前秒数(0-59)
            var cg = year + "/" + month + "/" + data + "     " + h + ":" + m + ":" + s;
            $("#time").html(cg)

        }, 1)
    </script>
</head>
<script>
    $(function(){
        //赋值性别
        if (${user.sex!=null}){
            if (${user.sex==2}) {
                $("#sex3").text("未知")
            }
            if (${user.sex==1}) {
                $("#sex3").text("男")
            }
            if (${user.sex==0}) {
                $("#sex3").text("女")
            }
        }
        // 修改
        $("#toUp").click(function () {
            console.log($("#select option:selected").val())
            $.ajax({
                type:"post",
                url:"userUpdate",
                data:{
                    uname:$("#userName4").val(),
                    sex:$("#select option:selected").val(),
                    age:$("#userAge4").val(),
                    mail:$("#userEmli4").val(),
                    phonenum:$("#userPhone4").val(),
                    upass:$("#userPassword4").val()
                },
                success:function(data){
                    window.location.reload();
                },
                error:function () {
                    alert("服务器请求失效")
                }
            });

        })
        //退出
        $("#tui").click(function() {
            $.ajax({
                type:"get",
                url:"exit",
                success:function(data){
                    window.location.reload();
                }
            });
        })
        $("#login").on("click","#toLogin",function(){
            $.ajax({
                type:"post",
                url:"login",
                data:{
                    uaccount:$("#userName").val(),
                    upass:$("#userPassword").val()
                },
                success:function(data){
                    if(data=='home') {
                        window.location.reload();
                    }else if(data=='admin' || data=='personnel' ){
                        window.location.href=data.toString();
                    }
                    else{
                        alert("登录失败");
                    }
                },
                error:function () {
                    alert("服务器请求失效")
                }
            });
        })
        //注册
        $("#but66").click(function () {
            var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
            var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if ($("#userPassword2").val()==$("#userPassword3").val()){
                if (ePattern.test($("#emli").val())){
                    if (uPattern.test($("#phone").val())){
                        $.ajax({
                            type:"post",
                            url:"register",
                            data:{
                                uname:$("#userName1").val(),
                                uaccount:$("#account").val(),
                                upass:$("#userPassword2").val(),
                                mail:$("#emli").val(),
                                phonenum:$("#phone").val()
                            },
                            success:function(data){
                                if(data>0){
                                    alert("注册成功")
                                    window.location.reload();
                                }else{
                                    alert("注册失败")
                                }
                            },
                            error:function () {
                                alert("服务器请求失效")
                            }
                        });
                    } else{
                        alert("手机号输入不正确")
                    }
                } else {
                    alert("邮箱输入不正确")
                }
            } else{
                alert("密码不一致")
            }
        })
    })
</script>
<body>
<div class="container">
    <div class="row" id="tou">
        <nav class="navbar navbar-default col-lg-12" style="text-align: center;">
            <div class="logo navbar-header" style="width: 90px; height: 51px; padding: 8px;">
                <a href="${pageContext.request.contextPath}"><img src="${pageContext.request.contextPath}/img/logo.png" style="width: 88px;" height="50.59px" alt="" /></a>
            </div>
            <div class="container-fluid" style="margin-left: 120px; padding: 10px; margin: 0px;">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul id="ul" class="nav navbar-nav" style="margin-left: 20px;">
                        <li>
                            <a href="${pageContext.request.contextPath}">首页</a>
                        </li>
                        <li>
                            <a href="moreFilmPage">电影</a>
                        </li>
                        <li>
                            <a href="we">影城介绍</a>
                        </li>
                    </ul>
                    <div class="navbar-nav container-fluid" style="position: relative;">
                        <div style="margin-left:30px;" style="display: block;">
                            <input id="search" type="search" placeholder="搜索">
                            <span id="but1" class="glyphicon glyphicon-search"></span>
                            <font id="time">#</font>
                        </div>
                    </div>
                    <div style="float: right;" id="islog">
                        <c:if test="${user!=null}">
                            <a href="personal"><img  src="${pageContext.request.contextPath}/img/${user.uimg}" class="img-circle" style="width: 40px; margin-right: 10px; height: 40px"></a>
                            <a href="personal">${user.uname}</a>&nbsp;&nbsp;
                            <button class="btn btn-danger" data-toggle="modal" data-target="#myModal" style="margin-left: 20px;"><span class=" glyphicon glyphicon-off" style="font-size: 14px; margin-right: 5px;"></span><span >退出</span></button>
                        </c:if>
                        <c:if test="${user==null}">
                            <img data-toggle='modal' data-target='#login' id="img" src="${pageContext.request.contextPath}/img/ht.jpg" class="img-circle" style="width: 40px; margin-right: 10px; height: 40px">
                            <a data-toggle='modal' data-target='#login'>登录</a>&nbsp;&nbsp;
                        </c:if>
                    </div>
                </div>
            </div>
        </nav>
    </div>
</div>
<div style="margin: 30px;">
</div>
<%--信息展示页面--%>
<div class="container detailed">
    <strong style="font-size: 30px; margin:20px; display: block;">个人中心</strong>
    <c:if test="${user==null}">
        <div align="center" class="container" style="margin-top: 30px; margin-left: 50px; line-height: 30px;font-size: 16px;">
            <p>暂未登录!请先<a data-toggle='modal' data-target='#login'>登录</a></p>
        </div>
    </c:if>
    <c:if test="${user!=null}">
        <div class="container" style="margin: 30px;line-height: 30px;font-size: 18px; position: relative;">
            <strong>昵称:<span id="userName3">${user.uname}</span></strong><br>
            <strong>性别:<span id="sex3"></span></strong><br>
            <strong>手机:<span id="userPhone3">${user.phonenum}</span></strong><br>
            <strong>邮箱:<span id="userEmli3">${user.mail}</span></strong><br>
            <img data-toggle='modal' data-target='#upimg' src="${pageContext.request.contextPath}/img/${user.uimg}" style="width: 180px;height: 180px;position: absolute ;right:15%;top:-45%;float: right">
            <a data-toggle='modal' data-target='#userUp' style="font-size: 15px">修改用户信息</a>&nbsp;&nbsp;
        </div>
        <div class="container" style="margin-left: 30px;margin-top: 40px;">
<%--            分页订单信息--%>
            <table class="table table-striped" style="width: 80%">
                <caption><span id="sum" style="margin-left: 30px;">共${requestScope.orderVO.total}条数据</span></caption>
                <thead>
                <tr>
                    <th>单号</th>
                    <th>电影</th>
                    <th>大厅</th>
                    <th style="width: 150px">座位</th>
                    <th>票数</th>
                    <th>总价</th>
                    <th>播放时间</th>
                </tr>
                </thead>
                <tbody id="table3">
                <c:forEach items="${requestScope.orderVO.orderList}" var="order">
                    <tr>
                        <td id="ticketId">${order.order_id}</td>
                        <td id="filmName">${order.film_name}</td>
                        <td id="roomName">${order.room_name}</td>
                        <td id="seat">${order.seat}</td>
                        <td id="cnt">${order.cnt}</td>
                        <td id="money">${order.price}</td>
                        <td id="startime">${order.startime}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div style="margin-left: 200px" id="demo7"></div>
        </div>
    </c:if>
</div>
<!--用户修改模态框 -->
<div class="modal fade" id="userUp" style="margin-top: 200px" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" >用户信息修改</h4>
            </div>
            <div class="text-center" style="margin-top: 15px; text-align: center; margin-bottom: 15px;">
                <table align="center" >
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">昵称</label>
                        </td>
                        <td>
                            <input type="text" value="${user.uname}" class="form-control" style="display: inherit;width: 200px;" id="userName4" placeholder="修改昵称">
                        </td>
                    </tr>
                    <tr height="50px">
                        <td align="center" width="80px">
                            <label  class="control-label">性别</label>
                        </td>
                        <td>
                           <select id="select" class="form-control">
                               <option value="2" <c:if test="${user.sex==2}">selected</c:if>>未知</option>
                               <option value="1" <c:if test="${user.sex==1}">selected</c:if>>男</option>
                               <option value="0" <c:if test="${user.sex==0}">selected</c:if>>女</option>
                           </select>
                        </td>
                    </tr>
                    <tr height="50px">
                        <td align="center" width="80px">
                            <label  class="control-label">age</label>
                        </td>
                        <td>
                            <input type="number" value="${user.age}" class="form-control" style="display: inherit;width: 200px;" id="userAge4" placeholder="修改年龄">
                        </td>
                    </tr>
                    <tr height="50px">
                        <td align="center" width="80px">
                            <label  class="control-label">手机</label>
                        </td>
                        <td>
                            <input type="text" value="${user.phonenum}" class="form-control" style="display: inherit;width: 200px;" id="userPhone4" placeholder="修改手机">
                        </td>
                    </tr>
                    <tr height="20px">
                        <td align="center" width="80px">
                            <label class="control-label">邮箱</label>
                        </td>
                        <td>
                            <input type="text" value="${user.mail}" class="form-control" style="display: inherit;width: 200px;" id="userEmli4" placeholder="修改邮箱">
                        </td>
                    </tr>
                    <tr height="50px">
                        <td align="center" width="80px">
                            <label  class="control-label">密码</label>
                        </td>
                        <td>
                            <input type="password" value="${user.upass}" class="form-control" style="display: inherit;width: 200px;" id="userPassword4" placeholder="修改密码">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer" style="position:relative;height: 60px; line-height: 60px;">
                <button style="position: absolute; left: 42%;" type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                <button  id="toUp" style="position: absolute; left: 52%;" type="button" class="btn btn-success" data-dismiss="modal">确认修改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--登录模态框 -->
<div class="modal fade" id="login" style="margin-top: 200px" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" >用户登录</h4>
            </div>
            <div class="text-center" style="margin-top: 15px; text-align: center; margin-bottom: 15px;">
                <table align="center" id="table">
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">用户名</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" style="display: inherit;width: 200px;" id="userName" placeholder="请输入用户名">
                        </td>
                    </tr>
                    <tr height="50px">
                        <td align="center" width="80px">
                            <label class="control-label">密码</label>
                        </td>
                        <td>
                            <input type="password" class="form-control" style="display: inherit;width: 200px;" id="userPassword" placeholder="请输入密码">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer" style="position:relative;height: 60px; line-height: 60px;">
                <button style="position: absolute; left: 42%;" type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                <button  id="toLogin" style="position: absolute; left: 52%;" type="button" class="btn btn-success" data-dismiss="modal">登录</button>
                <a style="position: absolute; right: 10%;line-height:50px;" data-dismiss="modal" data-toggle='modal' data-target='#register'>注册</a>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- 是否退出登录 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"  style="text-align: center;">是否退出登录</h4>
            </div>

            <div class="modal-footer" style="text-align: center;">
                <button id="tui" type="button" class="btn btn-danger">退出登录</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- 修改头像 -->
<div class="modal fade" id="upimg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title"  style="text-align: center;">更换图片</h4>
            </div>
            <div class="text-center" style="margin-top: 15px; text-align: center; margin-bottom: 15px;">
                <form onsubmit="return toUpdateImg();" method="post" id="updateImg" enctype="multipart/form-data">
                    <input type="file" style="margin-left: 30%" id="file" name="file">
                    <input type="submit" class="btn btn-success" value="更换">
                </form>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--注册模态框 -->
<div class="modal fade" id="register" style="margin-top: 200px"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">用户注册</h4>
            </div>
            <div class="text-center" style="margin-top: 15px; text-align: center; margin-bottom: 15px;">
                <table align="center" id="table2">
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">昵称</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" style="display: inherit;width: 200px;" id="userName1" placeholder="请输入用户名">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">用户名</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" style="display: inherit;width: 200px;" id="account" placeholder="请输入账号">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">密码</label>
                        </td>
                        <td>
                            <input type="password" class="form-control" style="display: inherit;width: 200px;" id="userPassword2" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">确认密码</label>
                        </td>
                        <td>
                            <input type="password" class="form-control" style="display: inherit;width: 200px;" id="userPassword3" placeholder="确认密码">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label class="control-label">邮箱</label>
                        </td>
                        <td>
                            <input type="email" class="form-control" style="display: inherit;width: 200px;" id="emli" placeholder="邮箱">
                        </td>
                    </tr>
                    <tr>
                        <td align="center" width="80px">
                            <label  class="control-label">手机号</label>
                        </td>
                        <td>
                            <input type="text" class="form-control" style="display: inherit;width: 200px;" id="phone" placeholder="手机号">
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer" style="position:relative;height: 60px; line-height: 60px;">
                <button style="position: absolute; left: 42%;" type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
                <button style="position: absolute; left: 52%;" type="button" class="btn btn-success" id="but66">注册</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<script>
    if(${user!=null}){
        var $ ;
        layui.use(['jquery','laypage','form'], function() {
            $ = layui.$ ;
            var laypage = layui.laypage
                ,form = layui.form;
            laypage.render({
                elem: 'demo7'
                , count:${requestScope.orderVO.total}
                , limit:${requestScope.orderVO.rows}
                , curr:${requestScope.orderVO.pageNo}
                ,limits:[4,10,25]
                , layout: ['count', 'prev', 'page', 'next','limit', 'skip']
                , jump: function (obj,first) {
                    if(first){
                        return;
                    }
                    toFind(obj.curr,obj.limit);
                }
            });
        });
    }
    function toUpdateImg(){
        var formData = new FormData($( "#updateImg" )[0]);
        $.ajax({
            cache : true,
            type : "post",
            url : "userUpdateImg",
            async : false,
            data : formData,
            contentType: false,   //jax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
            processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
            error : function(request) {
                layer.alert('操作失败', {
                    icon: 2,
                    title:"提示"
                });
            },success : function(ret) {
                window.location.reload();
            }
        })
        return false;
    }
    function toFind(pageNo,rows){
        window.location.href="personal?pageNo="+pageNo+"&rows="+rows;
    }
</script>
</body>
</html>
